<script type="text/javascript" src="/js/jquery.form.js"></script>
<link rel="stylesheet" href="/js/formValidator/css/template.css" type="text/css"/>
<link rel="stylesheet" href="/js/formValidator/css/validationEngine.jquery.css" type="text/css"/>
<script src="/js/formValidator/js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/formValidator/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>        

<script>
    jQuery(document).ready(function(){
        // binds form submission and fields to the validation engine
        jQuery("#my-form").validationEngine();
        
    });

    $(document).ready(function() {
        //    var options = { target: '#output', beforeSubmit: showRequest }; 
        $('#my-form').ajaxForm({ 
            // target identifies the element(s) to update with the server response 
            target: '#output', 
            // success identifies the function to invoke when the server response 
            // has been received; here we apply a fade-in effect to the new content 
            success: function(data) {
                if(data=='Image saved successfully'){
                    $('#output').html("<span style='color:green'>"+data+"</span>");
                                        window.location = '/admin/gallery';
                    //                    $('#output').html(); 
                }else{
                    $('#output').html("<span style='color:red'>Sorry an error has occurred while processing your request<br/>" + data); 
                }
                $('#loader').hide();
            } ,
            error: function(data) { 
                $('#output').html("<span style='color:red'>Sorry an error has occurred while processing your request"); 
                $('#loader').hide();
            } 
        });
    });

</script>
<div class="bodyContainer">
    <div id="output">
        <?php 
        if(isset($this->msg))
            echo $this->msg;
        ?>
    </div>

    <form action="/admin/gallery/check" method="post" id="my-form" enctype="multipart/form-data">
        <div class="uploadImage">
            <lable>Upload Image </lable>
            <div id="browse">
                <input type="file" onchange="document.getElementById('fakeInput').value = this.value;" id="realInput" size="30" name="realInput" />
                <div id="fakeinputfile">
                    <input type="text" id="fakeInput" name="fakeInput" />
                </div>
            </div>
            <div id="textGallery">
                <lable>Image Text</lable>
                <input type="text" name="text" id="text"  class="textGallery" />
            </div>

        </div>
        <input type="submit" name='button' value="add image"  class="button addImg"/>
    </form>


    <div class="galleryTable">
        <div class="colOne left">
            <div class="row clear left">
                <div class="inTable">
                    <div class="inTableRowHead left">
                        <div class="inTableCol left">

                            Name
                        </div>
                        <div class="inTableCol left center">
                            Text
                        </div>
                        <div class="inTableCol left">
                            Delete
                        </div>
                    </div>

<?php foreach($this->images as $image): ?>
                    <div class="inTableRow left">
                        
                        <div class="inTableCol left">
            <img src="/images/gallery/<?=$image['name']; ?>" alt=""/>
                        </div>
                        <div class="inTableCol left center" style="margin-top: 25px">
                            <?=$image['text']; ?>
                        </div>
                        <div class="inTableCol deleteDr left" style="margin-top: 25px">
                                        <a href="/admin/gallery/delete?id=<?=$image['id']; ?>" id="delete" name="delete" value="Delete" class="button" >Delete</a>
                        </div>
                    </div>
<?php endforeach; ?>
                </div>

            </div>
        </div>
        <div class="colTwo left">
            <div class="row tableHead clear">
                <ol id="log" class="left"></ol>
                <p id="queuestatus" class="clear left"></p>

            </div>
        </div>

    </div>

</div>
